<script setup>
import {onMounted, ref} from 'vue';
import dateUtil from '@/utils/dateUtil';
import chartApi from "@/api/chart.js";
import * as echarts from 'echarts'


const chartRef = ref()
// 加载完成后再进行
onMounted(()=>{
    const myChart = echarts.init(chartRef.value);
    const date = dateUtil.getMonthFistDay();
    const days = dateUtil.getMonthDays();

    chartApi.selectReserveCount(date).then(result => {
        const data = new Array(days.length).fill(0);

        for (let i=0; i<days.length; i++){
            for (let item of result.data){
                if (item.day == days[i]) {
                    data[i] = item.count;
                }
            }

            days[i] = days[i].substring(5);
        }

        let option = {
            title: {
                text: '预约趋势',
                textStyle: {
                    color: '#161D23',
                    fontWeight: 'bold',
                    fontSize: '16px',
                },
                left: '10px',
                top: '10px',
            },
            grid: {
                left: '3%',
                right: '30px',
                bottom: '3%',
                top: '40px',
                containLabel: true
            },
            tooltip: {},
            yAxis: {
                type: 'value',
                axisLabel: {color: '#FFF'},
            },
            xAxis: {
                axisLabel: {color: '#161D23'},
                type: 'category',
                data: days,    // 替换成时间
            },
            series: [
                {
                    name: '预约数量',
                    type: 'line',
                    smooth: true,
                    data: data,   // 显示数据
                    itemStyle: {
                        color: '#73C0DE',
                    },
                    barWidth: '50%',
                    label: {
                        show: true,
                        color: '#73C0DE',
                        position: 'top',
                    },
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        }

        myChart.setOption(option);
    });

});
</script>

<template>

    <div ref="chartRef" style="width: 100%; height: 100%">
    </div>

</template>

<style>

</style>